<template>
  <div class="kecheng-item">
    <div class="for-list" v-for="(item,index) in kechengList" :key="index" @click="toKCSQ(item)">
      <el-card class="item"
               :body-style="{
        padding: '10px',
        display: 'flex',
        width: '100%',
        height:'100%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent:'space-between'}">
        <div class="image">
          <el-image
              :src="item.coverSrc==null?'':item.coverSrc"
              fit="scale-down"></el-image>
        </div>
        <div class="title">
          <h2>{{ item.name }}</h2>
        </div>
        <div class="subhead">
          <span>{{ item.title }}</span>
        </div>
        <div class="btn">
          <div class="author">
            <div class="author-img">
              <el-image
                  :src="item.author.avatarUrl"
                  fit="contain">
                <div slot="error" class="image-slot" style="background: #d9dddc;font-size: 10px;border-radius: 50px">
                  暂无
                </div>
              </el-image>
            </div>
            <div class="author-text">
              {{ item.author.nickname }}
            </div>
          </div>
          <div class="btn-box">
            <div class="box">
              <i class="el-icon-s-custom"></i>
              <span>{{ item.study }}学过</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "kecheng-item",
  props: ["kechengList"],
  data() {
    return {}
  },
//计算属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},
//方法集合
  methods: {
    toKCSQ(item) {
      this.$router.push({
          path:'/Details/kecheng-details?id='+item.id,
      
      })

      this.$store.kechengItem = item
    }
  },
//生命周期 一 创建完成(可以访问当前this实例)
  created() {
    // console.log(this.kechengList);
  },
//生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
//生命周期 - 创建之前
  beforeCreate() {
  },
//生命周期 - 挂载之前
  beforeMount() {
  },
//生命周期 - 更新之前
  beforeUpdate() {
  },
//生命周期 - 更新之后
  updated() {
  },
//生命周期 - 销毁之前
  beforeDestroy() {
  },
//生命周期 - 销毁完成
  destroyed() {
  },
//如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
.kecheng-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .for-list {


    .item {
      width: 270px;
      height: 340px;
      margin: 10px 14px;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 15px;

      div {
        padding: 0;
      }

      .image {
        width: 250px;
        height: 150px;
        margin: 0 10px;
        background: #d3d3d3;
        border-radius: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: all 0.6s;
        overflow: hidden;

        div {
          border-radius: 15px;
        }
      }

      .image:hover {
        transform: scale(1.05);
      }

      .title {
        width: 100%;
        text-align: left;
        margin-top: 20px;

        h2 {
          font-size: 20px;
          padding: 0 10px;
          font-weight: 700;
          cursor: pointer;
        }

        h2:hover {
          color: #1e9fff;
        }
      }

      .subhead {
        width: 100%;
        display: block;
        text-align: left;
        margin-top: 30px;

        span {
          width: 100%;
          padding: 0 10px;
          color: #999999;
          display: inline-block;
          cursor: pointer;
        }
      }

      .btn {
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin-top: 20px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .author {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .author-img {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: flex;
            align-items: center;

            div {
              border-radius: 25px;
            }
          }

          .author-text {
            color: #999999;
            margin-left: 10px;
          }

          .author-text:hover {
            color: black;
          }
        }

        .btn-box {
          width: 90px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;

          .box {
            height: 30px;
            border-radius: 5px;
            background: #1E9FFF;
            color: #fff;
            cursor: pointer;

            span {
              margin-left: 5px;
            }
          }

          .box:hover {
            background: #67c23a;
            cursor: pointer;
          }
        }
      }

    }

  }

}


</style>